---
id: 5f3477aefa51bfc29327200b
title: Schritt 14
challengeType: 0
dashedName: step-14
---

# --description--

Du hast bereits drei Elemente gestaltet, indem du CSS in die `style` -Tags geschrieben hast. Das funktioniert auch, aber da es noch eine Menge anderer Stilformate geben wird, ist es am besten, alle Formate in eine separate Datei zu packen und zu verlinken.

Wir haben eine separate `styles.css`-Datei für dich erstellt und die Editoransicht auf diese Datei umgestellt. Mit den Registerkarten am oberen Rand des Editors kannst du zwischen den Dateien wechseln.

Beginne damit, die von dir erstellten Formate in die Datei `styles.css` zu schreiben. Vergewissere dich, `style`-Tags zum Öffnen und Schließen zu exkludieren.

# --hints--

Deine `styles.css`-Datei sollte den `h1, h2, p`-Typselektor enthalten.

```js
(getUserInput) => {
  assert(getUserInput('editableContents').replace(/[\s\n]*/g, "").match(/(h1|h2|p),(h1|h2|p),(h1|h2|p){/));
}
```

Dein Selektor sollte die `text-align`-Eigenschaft auf `center` setzen.

```js
(getUserInput) => {
  assert(getUserInput('editableContents').match(/text-align:\s*center;?/));
}
```

Dein Code sollte keine `<style>`-Tags enthalten.

```js
  assert.isFalse(/<\/html>(\n|.)*<\/?\s*style\s*>/.test(code));
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Cafe Menu</title>
    <style>
      h1, h2, p {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
      <section>
        <h2>Coffee</h2>
      </section>
    </main>
  </body>
</html>
```

```css
--fcc-editable-region--

--fcc-editable-region--

```
